<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>站酷（ZCOOL）-发现更好的设计</title>
		<link rel="stylesheet" type="text/css" href="../font/iconfont.css"/>
		<link rel="stylesheet" type="text/css" href="../css/home.m.css"/>
		<link rel="shortcut icon" type="image/x-icon" href="https//static.zcool.cn/git_z/z/site/favicon.ico?version=1594723186721">
	</head>
	<body>
		<header>
			<div class="header-nav">
				<img src="https://static.zcool.cn/git_z/z/common/images/svg/logo.svg" >
				<div class="download">
					<span>下载APP</span>
					<div class="more"></div>
				</div>
			</div>
			<div class="hide">
				<ul>
					<li><i class="iconfont">&#xe502;</i>搜索</li>
					<li><i class="iconfont">&#xe731;</i>登录/注册</li>
				</ul>
			</div>
		</header>
		
		<div class="mask"></div>

		<div class="container">
			<div class="active">
				<ul>
					<li>
						<div class=""></div>
						<a href="javascript:;">活动</a>
					</li>
					<li>
						<div class=""></div>
						<a href="javascript:;">招聘</a>
					</li>
					<li>
						<div class=""></div>
						<a href="javascript:;">赛事</a>
					</li>
					<li>
						<div class=""></div>
						<a href="javascript:;">站酷海洛</a>
					</li>
				</ul>
			</div>
			<div class="main">
				<div class="main-title">
					首页推荐
				</div>
				<div class="main-content">
					 <ul></ul>
					<div class="main-more">查看更多</div>
				</div>
			</div>
		</div>
		
		<footer>
			<img src="https://static.zcool.cn/git_z/z/common/images/svg/logo.svg" >
			<p>打开站酷发现更好设计</p>
			<div class="footer-download">下载APP</div>
			<div class="footer-open">APP内打开</div>
			<span>Copyright© 2006 - 2020 ZCOOL</span>
		</footer>
	
	</body>
	<script src="../js/homeData.m.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var more = document.getElementsByClassName('more')[0];
		var hide = document.getElementsByClassName('hide')[0];
		var mask = document.getElementsByClassName('mask')[0];
		var body1 = document.getElementsByTagName('body')[0];
		var flag = true;
		more.onclick = function(){
			if(flag) {
				hide.style.top = '7.5rem';
				mask.style.zIndex = '999';
				mask.style.opacity = '1';
				body1.style.overflow = 'hidden';
				flag = false;
			} else {
				hide.style.top = '-7.5rem';
				mask.style.zIndex = '-1';
				mask.style.opacity = '0';
				body1.style.overflow = 'scroll';
				flag = true;
			}
		}
	</script>
</html>
